<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花样链接卡</title>
</head>
<style>
    .p1{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 0px auto;
    }
    a{
        width: 100px;
        height: 100px;
        display: block;
        background: pink;
        float: left;
        line-height: 100px;
        color: white;
        text-align: center;
        text-decoration: none;
    }
    a:hover{
        color: blue;
    }
    .p1>a:nth-child(4){
        position: relative;
        top: 100px;
    }
    .p1>a:nth-child(2){
        position: relative;
        top: 200px;
        left: 100px;
    }
</style>
<body>
<div class="p1">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
    <a href="#">链接4</a>
    <a href="#">链接5</a>
</div>
</body>
</html>